<!--
 * @Author       : cxh
 * @Date         : 2021-12-25 19:15:51
 * @LastEditTime : 2021-12-28 11:22:32
 * @LastEditors  : cxh
 * @Description  : 
 * @FilePath     : \vue_WorkSpace\vue-wpt\src\pages\list\index.vue
-->

<template>
  <div>
    <filters
      :update-user-list="updateUserList"
      :get-table-data-source="getTableDataSource"
    ></filters>

    <list-table
      :handle-delete-item="handleDeleteItem"
      :user-list="userList"
    ></list-table>

    <!--<modal 
        :is-show="showDeleteModal" 
        :handle-enter="deleteItem"
        :handle-cancel="handleCancel"
    >
      {{ deleteContent }}
    </modal>-->
    <a-modal :visible="showDeleteModal" @ok="deleteItem" @cancel="handleCancel">
      {{ deleteContent }}
    </a-modal>
  </div>
</template>

<script>
// import HelloWorld from './components/HelloWorld.vue'

import { POST } from "./../../utils/request";
// import Modal from './../../components/Model'
import Filter from "./components/filter";
import ListTable from "./components/table";

export default {
  name: "filter-list",

  mounted: function () {
    this.getTableDataSource();
  },

  data: () => ({
    userList: [],

    // 控制删除弹窗
    showDeleteModal: false,
    // 被选择的要删除的这一项
    currentSelectDelete: null,
  }),
  methods: {
    handleDeleteItem: function (item) {
      this.showDeleteModal = true;
      this.currentSelectDelete = item.username;
    },

    updateUserList: function (newUserlist) {
      this.userList = newUserlist;
    },

    // 获取table数据
    getTableDataSource: function (params) {
      POST("/getUserList", params).then((data) => {
        if (!Array.isArray(data)) {
          return;
        }
        this.userList = data;
      });
    },

    deleteItem: function (id) {
      console.log("id", id);
      POST("/deleteAdaById", {
        id,
      }).then((data) => {
        console.log("data", data);
        if (data) {
          this.showDeleteModal = false;
          this.getTableDataSource();
        }
      });
    },
    handleCancel: function () {
      this.showDeleteModal = false;
    },
  },
  computed: {
    deleteContent: function () {
      return `确认删除${this.currentSelectDelete}吗？`;
    },
  },
  components: {
    filters: Filter,
    listTable: ListTable,
    // modal: Modal,
  },
};
</script>


<style scoped></style>








<style scoped>
.filter-wrap {
  padding: 10px;
}
.item-btn {
  color: deepskyblue;
  margin-right: 10px;
}
.filter-line {
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.label {
  display: flex;
  padding-right: 5px;
  justify-content: flex-end;
}
.table-item {
  display: flex;
  align-items: center;
}
.table-top {
  display: flex;
  background: #ddd;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.table-name {
  flex: 4;
}
.table-sex {
  flex: 3;
}
.table-lv {
  flex: 3;
}
.table-edit {
  flex: 5;
}
</style>
